<template>
  <div>
    <el-button type="primary" @click="addDialogVisible = true" class="addInfo">新增</el-button>
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="35%"
      :before-close="handleClose">
      <el-form :model="courseForm" status-icon :rules="addRules" 
      ref="courseForm" label-width="60px" class="demo-ruleForm addForm" :hide-required-asterisk="true">
        <el-form-item label="课程号" prop="cid">
          <el-input v-model="courseForm.cid"></el-input>
        </el-form-item>
        <el-form-item label="课程名" prop="cname">
          <el-input v-model="courseForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学分" prop="credits">
          <el-input v-model="courseForm.credits"></el-input>
        </el-form-item>
        <el-form-item label="先修课" prop="precourse">
          <el-input v-model="courseForm.precourse"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-form :model="changeInfo" :rules="changeRules" ref="changeInfo" class="demo-ruleForm">
      <el-table
      :data="courseData"
      border
      style="width: 100%"
      max-height="520px">
        <el-table-column
          prop="cid"
          label="课程号"
          width="253"
          :resizable="false"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="cname"
          label="课程名"
          width="253"
          :resizable="false"
          header-align="center"
          align="center">
          <template slot-scope="scope">
            <!-- <el-form-item prop="cname"> -->
              <el-input v-show=" isEdit == scope.$index " v-model="scope.row.cname" 
              placeholder="请输入内容"></el-input>
            <!-- </el-form-item> -->
            <span v-show=" isEdit != scope.$index ">{{ scope.row.cname }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="credits"
          label="学分"
          width="180"
          :resizable="false"
          header-align="center"
          align="center">
          <template slot-scope="scope">
            <!-- <el-form-item prop="credits"> -->
              <el-input v-show=" isEdit == scope.$index " v-model="scope.row.credits" 
              placeholder="请输入内容" prop="credits"></el-input>
            <!-- </el-form-item> -->
              <span v-show=" isEdit != scope.$index ">{{ scope.row.credits }}</span>
            </template>
        </el-table-column>
        <el-table-column
          prop="precourse"
          label="先修课"
          width="250"
          :resizable="false"
          header-align="center"
          align="center">
          <template slot-scope="scope">
            <!-- <el-form-item prop="precourse"> -->
              <el-input v-show=" isEdit === scope.$index " v-model="scope.row.precourse" 
              placeholder="请输入内容" prop="precourse"></el-input>
            <!-- </el-form-item> -->
              <span v-show=" isEdit !== scope.$index ">{{ scope.row.precourse }}</span>
            </template> 
        </el-table-column>
        <el-table-column label="操作" :resizable="false" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-show="isEdit!==scope.$index"
              @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
              <el-button
              size="mini"
              v-show="isEdit===scope.$index"
              @click="hideInput">取消</el-button>
            <el-button
              size="mini"
              type="danger"
              class="delete"
              v-show="isEdit!==scope.$index"
              @click="handleDelete(scope.row)">删除</el-button>
              <el-button
              size="mini"
              type="primary"
              v-show="isEdit===scope.$index"
              @click="editInfo()">提交</el-button>
          </template>
        </el-table-column>
      </el-table>
   </el-form>
  </div>
</template>

<script>
import { addCourse } from '@/api/course'
import { getCourse } from '@/api/course'
import { updateCourse } from '@/api/course'
import { deleteCourse } from '@/api/course'
export default {
  data(){
    return{
      addDialogVisible:false,
      row:null,
      isEdit:-1,
      courseData:[],
      courseForm:{
        cid:'',        
        cname:'',
        credits:'',
        precourse:''
      },
      addRules:{
        cid:[
          {required:true,message:'课程号不能为空',trigger:'blur'},
          {pattern:/^\d+/,message:'课程号不能包含字母及其他字符',trigger:'blur'}
        ],
        cname:[
          {required:true,message:'课程名不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        credits:[
          {required:true,message:'学分不能为空',trigger:'blur'},
          {pattern:/^\d+(.\d{1})?$/,message:'请输入整数或小数',trigger:'blur'}
        ],
        precourse:[
          {pattern:/^\d+/,message:'先修课不能包含字母及其他字符',trigger:'blur'}
        ]
      },
      changeInfo:{
        cname:'',        
        credits:'', 
        precourse:''
      },
      changeRules:{
        cname:[
          {required:true,message:'课程名不能为空',trigger:'blur'},
          {pattern:/^\S{2,}/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        credits:[
          {required:true,message:'学分不能为空',trigger:'blur'}
        ],
        precourse:[
          {pattern:/^\d+/,message:'先修课不能包含字母及其他字符',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    addInfo(){
      this.addDialogVisible = false
      this.$refs.courseForm.validate((valid)=>{
        if(valid){
          addCourse({...this.courseForm}).then(res=>{
            if(res.data.status===0){
              this.$nextTick(()=>{
                getCourse().then(res=>{
                  if(res.data.status===0){
                    this.courseData=res.data.data
                  }else{
                    alert('添加失败！')
                  }
                })
              })
              alert('添加成功！')
              this.$refs.courseForm.resetFields()
            }
          })
        }
      })
    },
    handleEdit(index,row){
      this.isEdit=index
      this.row=row
    },
    hideInput(){
      this.isEdit=-1
    },
    editInfo(){
      this.changeInfo=this.row
      this.$refs.changeInfo.validate((valid)=>{
        if(valid){
          updateCourse({...this.changeInfo}).then(res=>{
            if(res.data.status===0){
              this.$nextTick(()=>{
                getCourse().then(res=>{
                  if(res.data.status===0){
                    this.courseData=res.data.data
                    this.isEdit=-1
                  }else{
                    alert('修改失败！')
                  }
                })
              })
              alert('修改成功！')
              this.$refs.changeInfo.resetFields()
            }
          })
        }
      })
    },
    handleDelete(row){
      deleteCourse({cid:row.cid}).then(res=>{
        if(res.data.status===0){
          this.$nextTick(()=>{
            getCourse().then(res=>{
              if(res.data.status===0){
                this.courseData=res.data.data
              }else{
                alert('删除失败！')
              }
            })
          })
          alert('删除成功！')
        }
      })
    },
    handleClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  mounted(){
    this.$nextTick(()=>{
      getCourse().then(res=>{
        if(res.data.status===0){
          this.courseData=res.data.data
        }
      })
    })
  }
}
</script>

<style scoped>
.addInfo{
  float: right;
  margin-right: 15px;
  margin-bottom: 10px;
}
.delete{
  margin-left: 15px;
}
.addForm{
  width: 70%;
  margin:auto;
}
</style>